<template>
	<w-container id='action-pwd' class='plr-13' :loading="loading">
		<w-navbar navType="default" id="my-nav" bgColor='#fff' :title="title"></w-navbar>
		<view class="flex flex-dir-col flex-ai-center ptb-80" v-if="action=='set'">
			<text class="font-color-textPrimary font-size-14 pb-24">{{handleLang('输入当前操作密码')}}</text>
			<u-code-input v-model="oldPwd" dot :maxlength="6" borderColor='transparent' @finish='verifyPwd'>
			</u-code-input>
			<text class="font-size-10 font-color-textPrimary mt-24" @click="reset">{{handleLang('忘记密码？')}}</text>
		</view>
		<view class="plr-26" v-if="action=='reset'" style="margin-top: 380rpx;">
			<input class="mobile-inp font-size-14" :disabled="true" :placeholder="handleLang('请输入内容')" border="bottom"
				:value='userInfo.mobile'></u--input>
			<view class="flex ptb-12 mt-20 flex-js-sb flex-ai-center code font-color-textPrimary">
				<input v-model="code" class="font-size-14" :maxlength="6" placeholder-style="color:#ABABAB" :placeholder="handleLang('请输入验证码')" border="bottom"></input>
				<text class="font-color-textPrimary font-size-14" @click="checkVerifyStatus">{{handleLang(countDown==0? '发送验证码':`${countDown}后重新发送`)}}</text>
			</view>
		</view>
		<view class="action" v-if="action=='reset'">
			<w-button style='width: 100%;' type="colorful" :disabled="!code" @click='submit'>{{handleLang('确认')}}</w-button>
		</view>
		
		<w-jy-verify ref="captcha" v-if="captchaStatus"  @success='sendCode'></w-jy-verify>
	</w-container>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	import {
		cehckPayPassword
	} from '@/api/user/index.js'
	import {sendSms} from  '@/api/user/index.js'
	export default {
		data() {
			return {
				loading: false,
				oldPwd: '',
				isChange: 0,
				title: '设置操作密码',
				action: false,
				code:null,
				countDown:0,
				timer:null
			};
		},
		computed:{
			...mapState('config',{
				captchaStatus(state){
					return  !!Number(state.info.puzzleCaptcha)
				}
			})
		},
		onLoad({
			action
		}) {
			this.checkRoute(action)
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			checkVerifyStatus(){
				if(this.captchaStatus){
					this.$refs.captcha.showCaptcha();
				}else{
					this.sendCode();
				}
			},
			checkRoute(action) {
				this.action = action;
				if (action == 'reset') {
					this.title = '验证手机号'
					uni.setNavigationBarTitle({
						title: this.title
					})
				} else if (action == 'set') {
					this.title = '修改操作密码'
					uni.setNavigationBarTitle({
						title: this.title
					})
				} else {
					this.loading = true
					this.getUserInfo().then(res => {
						let action = 'reset'
						if (res.pay_password) {
							action = 'set'
						}
						uni.redirectTo({
							url: `/pages/my/actionPwd/getCode?action=${action}`
						})
					})
				}
			},
			sendCode(validate){
				if(this.countDown) return;
				uni.showLoading({
					title:"发送中"
				})
				sendSms({
					mobile:this.userInfo.mobile,
					event:'resetpwd',
					...validate
				}).then(res=>{
					this.startCountDown();
				})
			},
			startCountDown(){
				if(this.timer) clearInterval(this.timer);
				this.countDown=60
				this.timer=setInterval(()=>{
					this.countDown--
					if(this.countDown<=0){
						clearInterval(this.timer)
					}
				},1000)
			},
			submit(){
				this.toNext(this.code)
			},
			toNext(code){
				uni.redirectTo({
					url: `/pages/my/actionPwd/setPwd?code=${code}`
				})
			},
			verifyPwd() {
				uni.showLoading({
					title: '校验中'
				})
				cehckPayPassword({
					pay_password: this.oldPwd
				}).then(res => {
					this.toNext(res.data.code)
				})
			},
			reset() {
				this.$u.route('/pages/my/actionPwd/getCode', {
					action: 'reset'
				})
			}
		}
	}
</script>

<style lang="scss">
	#action-pwd {
		/deep/ .u-code-input__item {
			background-color: #ECECEC;
			@extend .br-8;
			width: 84rpx !important;
			height: 84rpx !important;
		}

		.mobile-inp {
			padding: 12rpx 0;
			height: 64rpx;
			color: #ABABAB;
			border-bottom: 1px solid #e0e0e3;
		}
		.code{
			border-bottom: 1px solid #e0e0e3;
		}
		.action{
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			@extend .plr-12;
			padding-bottom:calc(48rpx + var(--window-bottom)) ;
		}
	}
</style>
